<template>
  <div class="shop-add-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span class="title">添加店铺</span>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="data"
        :rules="rules"
        label-width="100px"
        class="shop-form"
      >
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="data.name" placeholder="请输入店铺名称" />
        </el-form-item>
        <el-form-item label="法人姓名" prop="su.real_name">
          <el-input v-model="data.su.real_name" placeholder="请输入法人姓名" />
        </el-form-item>
        <el-form-item label="电话号码" prop="su.phone">
          <el-input v-model="data.su.phone" placeholder="请输入电话号码" />
        </el-form-item>

        <el-form-item label="身份证正面" prop="su.id_card_a">
          <el-upload
            class="id-card-uploader"
            :show-file-list="false"
            action="http://localhost:2000/api/minio/uploadImages"
            :on-success="res => handleUploadSuccess(res, 'id_card_a')"
          >
            <img
              v-if="data.su.id_card_a"
              :src="data.su.id_card_a"
              class="uploaded-image"
            />
            <div v-else class="upload-placeholder">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <span class="upload-text">点击上传</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="身份证反面" prop="su.id_card_b">
          <el-upload
            class="id-card-uploader"
            :show-file-list="false"
            action="http://localhost:2000/api/minio/uploadImages"
            :on-success="res => handleUploadSuccess(res, 'id_card_b')"
          >
            <img
              v-if="data.su.id_card_b"
              :src="data.su.id_card_b"
              class="uploaded-image"
            />
            <div v-else class="upload-placeholder">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <span class="upload-text">点击上传</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="手持身份证" prop="su.id_card_c">
          <el-upload
            class="id-card-uploader"
            :show-file-list="false"
            action="http://localhost:2000/api/minio/uploadImages"
            :on-success="res => handleUploadSuccess(res, 'id_card_c')"
          >
            <img
              v-if="data.su.id_card_c"
              :src="data.su.id_card_c"
              class="uploaded-image"
            />
            <div v-else class="upload-placeholder">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <span class="upload-text">点击上传</span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { addShop } from "@/api/shop/shop.js";

const formRef = ref(null);
const data = ref({
  name: "",

  su: {
    id_card_a: "",
    id_card_b: "",
    real_name: "",
    phone: "",
    id_card_c: ""
  }
});

// 校验手机号的方法
const validatePhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入手机号码"));
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};

// 表单校验规则
const rules = {
  name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
  "su.real_name": [
    { required: true, message: "请输入法人姓名", trigger: "blur" }
  ],
  "su.phone": [{ required: true, validator: validatePhone, trigger: "blur" }],
  "su.id_card_a": [
    { required: true, message: "请上传身份证正面照片", trigger: "change" }
  ],
  "su.id_card_b": [
    { required: true, message: "请上传身份证反面照片", trigger: "change" }
  ],
  "su.id_card_c": [
    { required: true, message: "请上传手持身份证照片", trigger: "change" }
  ]
};

// 提交表单
const submitForm = async () => {
  formRef.value?.validate(async valid => {
    if (valid) {
      try {
        const res = await addShop(data.value);
        if (res.code == 200) {
          ElMessage.success("添加店铺成功");
        } else {
          ElMessage.error(res.msg || "添加店铺失败");
        }
      } catch (error) {
        console.error("添加店铺失败:", error);
        ElMessage.error("添加店铺失败");
      }
    } else {
      ElMessage.error("请完善所有必填信息");
      return false;
    }
  });
};

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields();
};

// 文件上传成功的回调
function handleUploadSuccess(res, type) {
  if (res.code == 200) {
    data.value.su[type] = res.data;
    formRef.value?.validateField(`su.${type}`);
  }
}
</script>

<style scoped>
.shop-add-container {
  padding: 20px;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.shop-form {
  padding: 20px 40px;
}

.id-card-uploader {
  display: flex;
  justify-content: center;
}

.id-card-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
  width: 180px;
  height: 180px;
}

.id-card-uploader :deep(.el-upload:hover) {
  border-color: #409eff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  margin-bottom: 8px;
}

.upload-text {
  color: #8c939d;
  font-size: 14px;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
